<template>
	<div class="create-project-content">
		<el-steps :active="routerIndex-1" align-center ref="headerStep">
			<el-step title="步骤1" description="选择您所需管理的项目"></el-step>
			<el-step title="步骤2" description="请选择您项目需要的模块"></el-step>
			<el-step title="步骤3" description="请确认您的队友,并分配任务"></el-step>
			<el-step title="步骤4" description="完成创建,选择截至日期并提交"></el-step>
		</el-steps>
		<div class="router-view custom-scrollbar" :style="{'height':`calc(100% - ${stepsHeight})`}">
			<!-- <keep-alive> -->
				<transition appear mode="out-in">
					<router-view></router-view>
				</transition>
			<!-- </keep-alive> -->
		</div>
		<el-button-group class="footer-nav">
			<el-button type="default" @click="lastStep" :disabled="routerIndex===1 ? true : false" icon="el-icon-arrow-left">上一步</el-button>
			<!-- 当前步骤 的数据是否已经保存    已经保存可进行下一步 -->
			<template v-if="(routerIndex===1 && createProjectData.project) || (routerIndex === 2 && createProjectData.module) || (routerIndex === 3 && createProjectData.partners)">
				<el-button type="primary" @click="nextStep" :disabled="routerIndex===4 ? true : false">下一步<i class="el-icon-arrow-right el-icon--right"></i></el-button>
			</template>
		</el-button-group>
	</div>
</template>

<script>
	import {mapGetters,mapState} from "vuex";
	export default {
		data() {
			return {
				stepsHeight:'80px',
				routers:{//记录所有步骤路由信息，
					1:"/project_admin/create/select_project",
					2:"/project_admin/create/select_module",
					3:"/project_admin/create/confirm_partner",
					4:"/project_admin/create/finish_create"
				} ,
				routerIndex:1
			}
		},
		mounted() {
			// 动态监听某个div变化
			this.erd = this.$elementResizeDetectorMaker()
			this.erd.listenTo(this.$refs.headerStep.$el, (element) => {
			   this.stepsHeight = (element.offsetHeight+60+20)+'px';
			})
		},
		computed:{
			...mapState(['createProjectData'])
		},
		methods: {
			nextStep(){
				this.routerIndex+=1;
				this.$router.push(this.routers[this.routerIndex]);
			},
			lastStep(){
				this.routerIndex-=1
				this.$router.push(this.routers[this.routerIndex]);
			}
		}
	}
</script>

<style lang="scss">
	.create-project-content{
		height: 100%;
		.router-view{
			margin-top: 20px;
			width: 100%;
			overflow-x: hidden;
		}
		.footer-nav{
			margin-top: 10px;
			float: right;
			padding: 0 40px;
		}
	}
</style>
